<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户编辑</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/skin.css" rel="stylesheet" />
        <script src="js/flexible.js"></script>
	</head>
	<body style="background: none;">
		<header class="mui-bar mui-bar-nav order-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户编辑</h1>
		</header>
		<div class="loginfrm orderfrm">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>姓　　名</label>
					<input type="text" class="inp" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row">
					<label>手　　机</label>
					<input type="number" class="inp" placeholder="请输入手机号">
				</div>
				<div class="mui-input-row">
					<label>联系电话</label>
					<input type="number" class="inp" placeholder="请输入联系电话">
				</div>
				<div class="mui-input-row">
					<label>备用联系</label>
					<input type="number" class="inp" placeholder="请输入备用联系电话">
				</div>
				<div class="mui-input-row">
					<label>性　　别</label>
					<button type="button" class='mui-btn timebtn' id="showUserPicker">请选择性别</button>
				</div>
				<div class="mui-input-row">
					<label>年　　龄</label>
					<input type="number" class="inp" placeholder="请输入年龄">
				</div>
				<div class="mui-input-row">
					<label>地　　区</label>
					<button type="button" class='mui-btn timebtn' id="showCityPicker3">请选择地区</button>
				</div>
				<div class="mui-input-row">
					<label>详细地址</label>
					<input type="text" class="inp" placeholder="请输入详细地址">
				</div>
				<div class="mui-input-row">
					<label>客户备注</label>
					<textarea rows="5" placeholder="客户备注"></textarea>
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn">保 存</button>
				</div>
			</form>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/city.data-3.js"></script>
		<script>
			(function() {
				mui.init();
				mui.ready(function() {
					//普通示例
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					var userPicker = new mui.PopPicker();
					userPicker.setData([{
						value: '0',
						text: '未知'
					}, {
						value: '1',
						text: '男'
					}, {
						value: '2',
						text: '女'
					}]);
					var showUserPickerButton = document.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							//console.log(JSON.stringify(items[0]));
							showUserPickerButton.innerText=items[0].text
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//地区
					var cityPicker3 = new mui.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = document.getElementById('showCityPicker3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.innerText = _getParam(items[0], 'text') + "," + _getParam(items[1], 'text') + "," + _getParam(items[2], 'text');
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})();
		
			
		</script>
	</body>
</html>
